<template>
  <div class="main">
    <div class="m-left">
      <div class="logo">
        <a href="">
          <div class="left">
            <img
              src="~@/assets/img/imgl2.png"
              alt=""
            >
          </div>
          <div class="right">
            <div class="tit">青少年健康管理</div>
          </div>
        </a>
      </div>
      <div class="nav">
        <ul>
          <li>
            <a
              href=""
              class="v1"
            ><i class="i1" />总览</a>
          </li>
          <li class="on">
            <a
              href=""
              class="v1"
            ><i class="i2" />学生个人信息</a>
          </li>
          <li>
            <a
              href=""
              class="v1"
            ><i class="i3" />健康指导方案</a>
          </li>
          <li>
            <a
              href=""
              class="v1"
            ><i class="i4" />健康数据统计</a>
          </li>
          <li>
            <a
              href=""
              class="v1"
            ><i class="i5" />健康预警反馈</a>
          </li>
        </ul>
      </div>
      <div class="tel">
        <a href="">
          <img
            src="~@/assets/img/iconl6.png"
            alt=""
          >
        </a>
      </div>
    </div>
    <div class="m-contant">
      <div class="left l1">
        <div class="m-constitutionl">
          <h3 class="g-titl3">
            学生体质健康
          </h3>
          <div class="constitutionl">
            <div class="ll">
              <div class="box">
                <h3 class="g-titl3">
                  体质分析
                </h3>
                <div class="m-chartl1">
                  <div
                    id="chart1"
                    class="chart"
                  />
                </div>
              </div>
            </div>
            <div class="rr">
              <div class="box">
                <h3 class="g-titl3">
                  体质排名
                </h3>
                <div class="m-chartl1">
                  <div
                    id="chart2"
                    class="chart"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="m-constitutionl l1">
          <h3 class="g-titl3">
            学生行为
          </h3>
          <div class="constitutionl l2">
            <div class="ll">
              <div class="box">
                <ul class="ul-listl9">
                  <li class="on">
                    <a
                      href=""
                      class="con"
                    >校内行为</a>
                  </li>
                  <li>
                    <a
                      href=""
                      class="con"
                    >校外行为</a>
                  </li>
                </ul>
                <ul class="ul-listl10">
                  <li>
                    <a
                      href=""
                      class="con"
                    >
                      <div class="l">
                        <div class="icon">
                          <img
                            src="~@/assets/img/iconl39.png"
                            alt=""
                          >
                        </div>
                      </div>
                      <div class="r">
                        <h3 class="tit">运动时间</h3>
                        <div class="date">2021-09-09</div>
                      </div>
                    </a>
                  </li>
                  <li />
                  <li>
                    <a
                      href=""
                      class="con"
                    >
                      <div class="l">
                        <div class="icon">
                          <img
                            src="~@/assets/img/iconl40.png"
                            alt=""
                          >
                        </div>
                      </div>
                      <div class="r">
                        <h3 class="tit">运动项目</h3>
                        <div class="date">篮球</div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a
                      href=""
                      class="con"
                    >
                      <div class="l">
                        <div class="icon">
                          <img
                            src="~@/assets/img/iconl41.png"
                            alt=""
                          >
                        </div>
                      </div>
                      <div class="r">
                        <h3 class="tit">运动时长</h3>
                        <div class="date">40 mins</div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a
                      href=""
                      class="con"
                    >
                      <div class="l">
                        <div class="icon">
                          <img
                            src="~@/assets/img/iconl42.png"
                            alt=""
                          >
                        </div>
                      </div>
                      <div class="r">
                        <h3 class="tit">运动强度</h3>
                        <div class="date">强</div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a
                      href=""
                      class="con"
                    >
                      <div class="l">
                        <div class="icon">
                          <img
                            src="~@/assets/img/iconl43.png"
                            alt=""
                          >
                        </div>
                      </div>
                      <div class="r">
                        <h3 class="tit">心率</h3>
                        <div class="date">100 次/分钟</div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="rr">
              <div class="box">
                <h3 class="g-titl3">
                  体温监控
                </h3>
                <ul class="ul-listl10 l1">
                  <li>
                    <a
                      href=""
                      class="con"
                    >
                      <div class="l">
                        <div class="icon">
                          <img
                            src="~@/assets/img/iconl39.png"
                            alt=""
                          >
                        </div>
                      </div>
                      <div class="r">
                        <h3 class="tit">检测时间</h3>
                        <div class="date">2021-09-09</div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a
                      href=""
                      class="con"
                    >
                      <div class="l">
                        <div class="icon">
                          <img
                            src="~@/assets/img/iconl40.png"
                            alt=""
                          >
                        </div>
                      </div>
                      <div class="r">
                        <h3 class="tit">运动项目</h3>
                        <div class="date">篮球</div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a
                      href=""
                      class="con"
                    >
                      <div class="l">
                        <div class="icon">
                          <img
                            src="~@/assets/img/iconl44.png"
                            alt=""
                          >
                        </div>
                      </div>
                      <div class="r">
                        <h3 class="tit">体温</h3>
                        <div class="date">36.5 ℃</div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="m-proposall">
            <h3 class="g-titl3">
              当前建议处方
            </h3>
            <ul class="ul-listl8">
              <li>
                <div class="con">
                  <div class="ll">
                    <div class="icon">
                      <img
                        src="images/iconl36.png"
                        alt=""
                      >
                    </div>
                  </div>
                  <div class="rr">
                    <div class="tit">
                      每天跑步<em>2000米</em>
                    </div>
                    <div class="bot">
                      <div class="line">
                        <span style="width: 30%;" />
                      </div>
                      <div class="num">
                        30%
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="blue">
                <div class="con">
                  <div class="ll">
                    <div class="icon">
                      <img
                        src="images/iconl37.png"
                        alt=""
                      >
                    </div>
                  </div>
                  <div class="rr">
                    <div class="tit">
                      每天跳绳<em>2000个</em>
                    </div>
                    <div class="bot">
                      <div class="line">
                        <span style="width: 100%;" />
                      </div>
                      <div class="num">
                        130%
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="orange">
                <div class="con">
                  <div class="ll">
                    <div class="icon">
                      <img
                        src="images/iconl38.png"
                        alt=""
                      >
                    </div>
                  </div>
                  <div class="rr">
                    <div class="tit">
                      每天仰卧起座<em>200个</em>
                    </div>
                    <div class="bot">
                      <div class="line">
                        <span style="width: 60%;" />
                      </div>
                      <div class="num">
                        60%
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="m-chart2">
            <h3 class="g-titl3">
              整体各项完成率
            </h3>
            <div
              id="chart3"
              class="chart1"
            />
          </div>
          <div class="m-chart2 last">
            <h3 class="g-titl3">
              干预效果
            </h3>
            <div
              id="chart4"
              class="chart1"
            />
          </div>
        </div>
      </div>
      <div class="right">
        <div class="m-information">
          <a
            href=""
            class="close"
          />
          <a
            href=""
            class="more"
          />
          <div class="information">
            <div class="box">
              <div class="pic">
                <img
                  src="~@/assets/img/imgl7.png"
                  alt=""
                >
              </div>
            </div>
            <div class="txt">
              <h3 class="tit">
                李艾萌
              </h3>
              <div class="info">
                江苏路第五小学
              </div>
            </div>
          </div>
          <div class="m-events">
            <div class="g-tit">
              <h3 class="tit">
                新项目
              </h3>
              <a
                href=""
                class="btn qm"
              ><em>+</em>增加</a>
            </div>
            <ul class="ul-listl3">
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl17.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">坐位体前屈</h3>
                    <div class="date">May 5 - 11:00 AM</div>
                    <div class="info">USA,Houston</div>
                  </div>
                </a>
              </li>
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl18.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">立正跳远</h3>
                    <div class="date">May 27 - 9:00 AM</div>
                  </div>
                </a>
              </li>
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl18.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">立正跳远</h3>
                    <div class="date">May 27 - 9:00 AM</div>
                  </div>
                </a>
              </li>
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl18.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">立正跳远</h3>
                    <div class="date">May 27 - 9:00 AM</div>
                  </div>
                </a>
              </li>
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl18.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">立正跳远</h3>
                    <div class="date">May 27 - 9:00 AM</div>
                  </div>
                </a>
              </li>
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl18.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">立正跳远</h3>
                    <div class="date">May 27 - 9:00 AM</div>
                  </div>
                </a>
              </li>
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl18.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">立正跳远</h3>
                    <div class="date">May 27 - 9:00 AM</div>
                  </div>
                </a>
              </li>
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl18.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">立正跳远</h3>
                    <div class="date">May 27 - 9:00 AM</div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <div class="m-notifications">
            <div class="g-tit">
              <h3 class="tit">
                新消息
              </h3>
            </div>
            <ul class="ul-listl4">
              <li>
                <div class="con">
                  <a
                    href=""
                    class="sclose"
                  />
                  <h3 class="tit">
                    <a href="">今日高强度运动时间少于60分钟</a>
                  </h3>
                </div>
              </li>
              <li>
                <div class="con">
                  <a
                    href=""
                    class="sclose"
                  />
                  <h3 class="tit">
                    <a href="">今日高强度运动时间少于60分钟</a>
                  </h3>
                </div>
              </li>
              <li>
                <div class="con">
                  <a
                    href=""
                    class="sclose"
                  />
                  <h3 class="tit">
                    <a href="">今日高强度运动时间少于60分钟</a>
                  </h3>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/scss/stu2.scss'
import echarts from 'echarts'
import $ from 'jquery'
import UpdatePassword from '@/views/main-navbar-update-password'
import { clearLoginInfo } from '@/utils'
import { createChart, createPieChart, createRateChart, createFunnelChart } from '@/utils/indexChart'
export default {
  components: {
    UpdatePassword
  },
  data() {
    return {
      pageLoading: false,
      updatePassowrdVisible: false,
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      chart5: null
    }
  },
  computed: {
    userId: {
      get() { return this.$store.state.user.id },
      set(val) { this.$store.commit('user/updateId', val) }
    },
    userName: {
      get() { return this.$store.state.user.name },
      set(val) { this.$store.commit('user/updateName', val) }
    },
    userTel: {
      get() { return this.$store.state.user.tel },
      set(val) { this.$store.commit('user/updateTel', val) }
    },
    userMobile: {
      get() { return this.$store.state.user.mobile },
      set(val) { this.$store.commit('user/updateMobile', val) }
    },
    userDeptId: {
      get() { return this.$store.state.user.deptId },
      set(val) { this.$store.commit('user/updateDeptId', val) }
    },
    userDeptName: {
      get() { return this.$store.state.user.deptName },
      set(val) { this.$store.commit('user/updateDeptName', val) }
    },
    userType: {
      get() { return this.$store.state.user.userType },
      set(val) { this.$store.commit('user/updateUserType', val) }
    }
  },
  created() {
  },
  mounted() {
    this.getUserInfo()
  },
  destroyed() {
  },
  activated() {
  },
  methods: {
    // 获取当前用户
    getUserInfo() {
      this.$http({
        url: this.$http.requestUrl('/sys/user/info'),
        method: 'get',
        params: this.$http.requestParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.userId = data.user.userId
          this.userName = data.user.userName
          this.userTel = data.user.tel
          this.userMobile = data.user.mobile
          this.userDeptId = data.user.deptId
          this.userDeptName = data.user.deptName
          this.userType = data.user.userType
          this.initChart1()
          this.initChart2()
          this.initChart3()
          this.initChart4()
        }
      })
    },
    // 统计图
    initChart1() {
      // chart1
      this.chart1 = echarts.init(document.getElementById('chart1'))
      var legendData = ['上次测试值', '当前测试值']; //图例
      var indicator = [{
        text: '机能',
        max: 20,
      },
      {
        text: '柔韧素质',
        max: 20,
      },
      {
        text: '心肺耐力',
        max: 20
      },
      {
        text: '爆发力',
        max: 20
      },
      {
        text: '力量',
        max: 20
      }
      ];
      var dataArr = [{
        value: [4, 15, 11, 12, 18],
        name: legendData[0],
        itemStyle: {
          normal: {
            lineStyle: {
              color: 'rgba(0, 195, 169, 0.4)',
              // shadowColor: 'rgba(0, 195, 169, 0.4)',
              // shadowBlur: 10,
            },
            shadowColor: 'rgba(0, 195, 169, 0.4)',
            shadowBlur: 10,
          },
        },
        areaStyle: {
          normal: { // 单项区域填充样式
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 1, //左
              y2: 1, //上
              colorStops: [{
                offset: 0,
                color: 'rgba(0, 195, 169, 0.4)'
              }, {
                offset: 0.5,
                color: 'rgba(0, 195, 169, 0.4)'
              }, {
                offset: 1,
                color: 'rgba(0, 195, 169, 0.4)'
              }],
              globalCoord: false
            },
            opacity: 1 // 区域透明度
          }
        }
      },
      {
        value: [12, 4, 15, 15, 11],
        name: legendData[1],
        itemStyle: {
          normal: {
            lineStyle: {
              color: 'rgba(34, 119, 235, 0.5)',
              // shadowColor: 'rgba(34, 119, 235, 0.5)',
              // shadowBlur: 10,
            },
            shadowColor: 'rgba(34, 119, 235, 0.5)',
            shadowBlur: 10,
          },
        },
        areaStyle: {
          normal: { // 单项区域填充样式
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 1, //左
              y2: 1, //上
              colorStops: [{
                offset: 0,
                color: 'rgba(34, 119, 235, 0.5)'
              }, {
                offset: 0.5,
                color: 'rgba(34, 119, 235, 0.5)'
              }, {
                offset: 1,
                color: 'rgba(34, 119, 235, 0.5)'
              }],
              globalCoord: false
            },
            opacity: 1 // 区域透明度
          }
        }
      }
      ];
      var colorArr = ['rgba(0, 195, 169, 0.4)', 'rgba(34, 119, 235, 0.5)']; //颜色
      this.chart1.setOption({
        title: {
          show: false,
          text: "数学薄弱知识点分析",
          x: "4%",
          textStyle: {
            color: 'rgba(0, 0, 0, 0.25)',
            fontSize: '14'
          },
          subtextStyle: {
            color: '#2F5A54',
            fontSize: '14',
          },
        },
        color: colorArr,
        legend: {
          orient: 'vertical',
          icon: 'circle', //图例形状
          data: legendData,
          bottom: 35,
          right: 40,
          itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
          itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
          itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
          textStyle: {
            fontSize: 14,
            color: '#2F5A54',
          },
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: 'rgba(0, 0, 0, 0.25)',
              fontSize: 14
            },
          },
          indicator: indicator,
          splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: { // 分隔区域的样式设置。
              color: ['#EDFDF9', '#EDFDF9'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
          },
          axisLine: { //指向外圈文本的分隔线样式
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.06)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.06)', // 分隔线颜色
              width: 1, // 分隔线线宽
            }
          },
        },
        series: [{
          type: 'radar',
          symbolSize: 8,
          // symbol: 'angle',
          data: dataArr
        }]
      })
      window.addEventListener('resize', () => {
        this.chart1.resize()
      })
    },
    // 统计图2
    initChart2() {
      var chart2 = echarts.init(document.getElementById('chart2'));
      var placeHolderStyle = {
        normal: {
          color: '#fff',
          opacity: .1
        },
        emphasis: {
          color: '#fff',
          opacity: .1
        }
      }
      chart2.setOption({
        color: ['#4DBDAE', '#E47F79', '#F3AF5C'],
        textStyle: {
          fontSize: 16,
          color: '#40E7F4 '
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          bottom: '30%',
          right: '0',
          left: 'auto',
          data: ['班级中排名', '年纪中排名', '区同年级排名'],
          textStyle: {
            color: 'rgba(47, 90, 84,1)',
            fontSize: 14,
            lineHeight: 20,
            padding: [0, 0, 0, 20]
          },
          icon: "circle",
          itemWidth: 14,
          itemHeight: 14,
          itemGap: 16
        },
        series: [{
          name: '班级中排名',
          type: 'pie',
          radius: ['50%', '54%'],
          center: ['22%', '50%'],
          label: false,
          startAngle: 130,
          clockWise: true, //顺时加载
          hoverAnimation: true,
          hoverOffset: 3,
          data: [{
            value: 1078,
            name: '班级中排名',
            itemStyle: {
              color: { // 完成的圆环的颜色
                colorStops: [{
                  offset: 0,
                  color: '#4DBDAE' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#4DBDAE' // 100% 处的颜色
                }]
              }
            }
          },
          {
            value: 450,
            hoverAnimation: false, //鼠标移入变大
            itemStyle: placeHolderStyle
          }
          ]
        }, {
          name: '年纪中排名',
          type: 'pie',
          radius: ['33%', '37%'],
          center: ['22%', '50%'],
          label: false,
          startAngle: 360,
          clockWise: true,
          hoverAnimation: true,
          hoverOffset: 3,
          data: [{
            value: 1200,
            name: '年纪中排名',
            itemStyle: {
              color: { // 完成的圆环的颜色
                colorStops: [{
                  offset: 0,
                  color: '#E47F79' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#E47F79' // 100% 处的颜色
                }]
              }
            }
          },
          {
            value: 400,
            hoverAnimation: false,
            itemStyle: placeHolderStyle
          }
          ]
        }, {
          name: '区同年级排名',
          type: 'pie',
          radius: ['15%', '19%'],
          center: ['22%', '50%'],
          label: false,
          startAngle: 3000,
          clockWise: true,
          hoverAnimation: true,
          hoverOffset: 3,
          data: [{
            value: 877,
            name: '区同年级排名',
            itemStyle: {
              color: { // 完成的圆环的颜色
                colorStops: [{
                  offset: 0,
                  color: '#F3AF5C' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#F3AF5C' // 100% 处的颜色
                }]
              }
            }
          },
          {
            value: 500,
            hoverAnimation: false,
            itemStyle: placeHolderStyle
          }
          ]
        }]
      })
      window.addEventListener('resize', () => {
        this.chart2.resize()
      })
    },
    // 统计图
    initChart3() {
      var chart1 = echarts.init(document.getElementById('chart3'));
      chart1.setOption({
        tooltip: {
          show: true
        },
        legend: {
          textStyle: {
            color: '#000',
            fontSize: 18
          },
        },
        grid: {
          top: '33px',
          left: '0',
          right: '10px',
          bottom: '0',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['跑步', '跳绳', '仰卧起坐'],
          axisLine: {
            lineStyle: {
              color: "rgba(0,0,0,.06)"
            }
          },
          axisTick: {
            lineStyle: {
              width: 0
            }
          },
          axisLabel: {
            fontSize: 18,
            color: "rgba(0, 0, 0, 0.25)"
          },
          splitLine: {
            show: false
          }
        }],
        yAxis: [{
          type: 'value',
          min: 0,
          max: 100,
          interval: 25,
          axisLine: {
            show: false
          },
          axisTick: {
            lineStyle: {
              width: 0
            }
          },
          axisLabel: {
            fontSize: 18,
            color: "rgba(0, 0, 0, 0.25)"
          },
          splitLine: {
            lineStyle: {
              color: "rgba(0,0,0,.06)",
              type: 'solid'
            }
          }
        }],
        series: [{
          type: 'bar',
          barWidth: '10',
          data: [{
            value: 30,
            itemStyle: {
              color: '#4DBDAE'
            }
          }, {
            value: 100,
            itemStyle: {
              color: '#659EED'
            }
          }, {
            value: 60,
            itemStyle: {
              color: '#F3AF5C'
            }
          }],
          itemStyle: {
            color: "#4DBDAE",
            barBorderRadius: [10, 10, 0, 0],
            shadowColor: 'rgba(92, 243, 225, 0.3)',
            shadowBlur: 4,
            shadowOffsetX: 5,
            shadowOffsetY: 2
          }
        }

        ]
      })
      window.addEventListener('resize', () => {
        this.chart3.resize()
      })
    },
    // 统计图
    initChart4() {
      var chart4 = echarts.init(document.getElementById('chart4'));
      chart4.setOption({
        tooltip: {
          show: true
        },
        legend: {
          textStyle: {
            color: '#000',
            fontSize: 18
          },
        },
        grid: {
          top: '33px',
          left: '0',
          right: '10px',
          bottom: '0',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10'],
          axisLine: {
            lineStyle: {
              color: "rgba(0,0,0,.06)"
            }
          },
          axisTick: {
            lineStyle: {
              width: 0
            }
          },
          axisLabel: {
            fontSize: 18,
            color: "rgba(0, 0, 0, 0.25)"
          },
          splitLine: {
            show: false
          }
        }],
        yAxis: [{
          type: 'value',
          min: 0,
          max: 20,
          interval: 5,
          axisLine: {
            show: false
          },
          axisTick: {
            lineStyle: {
              width: 0
            }
          },
          axisLabel: {
            fontSize: 18,
            color: "rgba(0, 0, 0, 0.25)"
          },
          splitLine: {
            lineStyle: {
              color: "rgba(0,0,0,.06)",
              type: 'solid'
            }
          }
        }],
        series: [{
          type: 'line',
          symbol: 'none',
          data: [9, 7, 6, 12, 8, 6, 11, 19, 18, 16],
          lineStyle: {
            normal: {
              width: 3,
              color: {
                type: 'linear',

                colorStops: [{
                  offset: 0,
                  color: '#fff' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#4DBDAE' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: '#4DBDAE' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: '#4DBDAE' // 100% 处的颜色
                }, {
                  offset: 0,
                  color: '#fff' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(77, 189, 174, 0.15)',
              shadowBlur: 3,
              shadowOffsetY: 20
            }
          },
          itemStyle: {
            normal: {
              color: '#fff',
              borderWidth: 10,
              /*shadowColor: 'rgba(72,216,191, 0.3)',
              shadowBlur: 100,*/
              borderColor: "#A9F387"
            }
          },
          smooth: true
        }]
      })
      window.addEventListener('resize', () => {
        this.chart4.resize()
      })
    },
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init()
      })
    },
    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.requestUrl('/sys/logout'),
          method: 'post',
          data: this.$http.requestData()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            clearLoginInfo()
            this.$router.push({ name: 'login' })
          }
        })
      }).catch(() => { })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
